<template>
	<cl-page>
		<view class="page-wrap">
			<view class="logo-img">
				<cl-image
					src="/static/img/login.png"
					:defaultHost="false"
					:size="[480, 600]"
					mode="scaleToFill"
				></cl-image>
			</view>

			<view class="logo-wrap">
				<view class="logo-wrap_title">欢迎登录</view>

				<view class="logo-wrap_content">
					<view class="input">
						<!-- type="number" -->
						<!-- maxlength="11" -->
						<cl-input
							v-model="form.username"
							placeholder="账号"
							:border="false"
							:height="108"
						/>
					</view>
					<view class="input">
						<cl-input
							v-model="form.password"
							type="password"
							placeholder="密码"
							:border="false"
							:height="108"
						/>
					</view>
					<view class="input code">
						<cl-input
							v-model="form.code"
							placeholder="验证码"
							:border="false"
							:height="108"
						/>
						<image
							class="code-img"
							:src="code.img"
							@tap="code.get()"
							mode="heightFix"
						/>
					</view>
				</view>

				<cl-button
					type="primary"
					:loading="loading"
					round
					:fill="true"
					:height="90"
					:fontSize="30"
					@tap="submit()"
					>登录</cl-button
				>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { ref, reactive, defineComponent } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";

import md5 from "md5";
import { useCool, useStore } from "/@/cool";
import { encrypt } from "/@/utils";

const { user } = useStore();
const { router, service, ui, mitt } = useCool();

const form = reactive<any>({
	username: "",
	password: "",
	code: "",
	uuid: "",
	// phone: "18060911209",
	// password: "123456",
});

const loading = ref<boolean>(false);

const code = reactive<any>({
	img: "",
	get: () => {
		service.auth.code().then((res: any) => {
			form.uuid = res.uuid;
			code.img = res.img;
		});
	},
});

function submit() {
	if (!form.username) {
		ui.showToast("请先输入账号！");
		return false;
	}
	if (!form.password) {
		ui.showToast("请先输入密码！");
		return false;
	}
	if (!form.code) {
		ui.showToast("请先输入验证码！");
		return false;
	}

	loading.value = true;
	const params = JSON.parse(JSON.stringify(form));
	params.password = encrypt(params.password);

	service.auth
		.login(params)
		.then((res: any) => {
			// if (form.type)
			// router.push("/pages/index/index");

			// 设置token
			console.info("res.token", res.token);
			user.setToken(res.token);

			// 设置用户信息
			console.info("res.user", res.user);
			user.set(res.user);

			// 登录跳转
			// router.nextLogin(form.type);

			router.push({
				path: "/pages/index/index",
				mode: "redirectTo",
			});
		})
		.finally(() => {
			loading.value = false;
		});
}

onLoad(() => {
	// getList()
	// typeList.get()
	code.get();
});
</script>

<style lang="scss" scoped>
.page-wrap {
	height: 100vh;
	background-color: #fff;
}

.logo-img {
	display: flex;
	justify-content: center;
	padding-top: 30rpx;
}

.logo-wrap {
	padding: 80rpx 70rpx 0;
	&_title {
		font-size: 40rpx;
		font-weight: 600;
		text-align: center;
		margin-bottom: 16rpx;
	}
	&_content {
		margin-bottom: 64rpx;
		.input {
			width: 100%;
			// height: 108rpx;
			// line-height: 110rpx;
			// display: flex;
			// align-items: center;
			border-bottom: 0.7px solid $uni-border-color;
			:deep(.cl-input) {
				input {
					font-size: 30rpx;
				}
			}
			:deep(.cl-select) {
				.cl-select__value {
					font-size: 30rpx;
				}
			}
		}
		.code {
			display: flex;
			align-items: center;
			&-img {
				// width: 200rpx;
				// flex: 1;
				flex-shrink: 0;
				height: 108rpx;
			}
		}
	}
}
</style>
